<template>
	<view class="container">
		<u-toast ref="uToast"></u-toast>
		<!-- 显示备案小程序 -->
		<view class="applet">
			<view class="item">
				<view class="header">
					<view class="title">本次备案小程序</view>
				</view>
				<view class="content">
					<view class="line">
						<view class="label">唯一标识</view>
						<view class="value">{{ applet.appid }}</view>
					</view>
					<view class="line">
						<view class="label">备案名称</view>
						<view class="value">{{ applet.name }}</view>
					</view>
					<view class="line">
						<view class="label">订单编号</view>
						<view class="value">{{ order_no }}</view>
					</view>
					<view class="line">
						<view class="label">创建时间</view>
						<view class="value">{{ applet.create_at }}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 选择支付方式 -->
		<view class="form">
			<view class="item">
				<view class="label">支付方式</view>
				<view class="value">
					<u-radio-group v-model="form.pay_type" placement="row">
						<u-radio :customStyle="{marginRight: '15px'}" label="微信支付" name="0">
						</u-radio>
						<u-radio label="卡密支付" name="1"></u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="item" v-if="form.pay_type == 1">
				<view class="label">卡密兑换</view>
				<view class="value"><u--input placeholder="请输入卡密" border="surround" v-model="form.card_key"></u--input>
				</view>
			</view>
			<view class="item" v-if="form.pay_type == 0">
				<view class="label">支付金额</view>
				<view class="value"><u--input disabled placeholder="请输入支付金额" border="surround" :value="store.orderPrice"></u--input>
				</view>
			</view>
		</view>
		<view class="form">
			<view class="header">
				<view class="title">备案须知</view>
			</view>
			<view class="content">
				<u-parse :content="store.filingNotice"></u-parse>
			</view>
		</view>
		<!-- 提交订单支付 -->
		<view class="submit" @click="onPayment">
			<view class="btn">
				<u-button shape="circle" type="primary" text="立即支付"
					color="linear-gradient(to right, #2979ff, #2b85e4)"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		detail
	} from "@/api/applet.js";
	import {
		payment
	} from "@/api/order.js";
	import {
		config
	} from "@/api/system.js";
	export default {
		data() {
			return {
				form: {
					order_id: '',
					pay_type: '0',
					card_key: '',
					applet_id: ''
				},
				order_no: '',
				applet: {},
				store: {}
			};
		},
		onLoad(options) {
			if (!options.applet_id || !options.order_id) {
				this.$refs.uToast.show({
					type: 'error',
					message: "缺少必要参数~！",
					complete() {
						uni.navigateBack()
					}
				})
				return false;
			}
			this.order_no = options.order_no
			this.form.applet_id = options.applet_id
			this.form.order_id = options.order_id
			this.onGetApplet()
			this.getConfig()
		},
		methods: {
			getConfig() {
				let _this = this
				config({
					key: 'store'
				}).then(res => {
					_this.store = res.data.store
				}).catch(err => {

				})
			},
			onPayment() {
				let _this = this
				uni.showModal({
					title: '温馨提示',
					content: '如果支付成功，但是提交备案失败，可按要求修改完之后，返回订单中心重新提交备案申请',
					success(res) {
						if (res.confirm) {
							payment(_this.form).then(res => {
								let payment = res.data
								if (_this.form.pay_type == 0) {
									uni.requestPayment({
										provider: 'wxpay',
										timeStamp: payment.timeStamp,
										nonceStr: payment.nonceStr,
										package: payment.package,
										signType: payment.signType,
										paySign: payment.paySign,
										success: function(res) {
											uni.showToast({
												icon: 'none',
												title: '支付成功'
											});
											uni.redirectTo({
												url: '/pages/main/order/index'
											})
											console.log('success:' + JSON.stringify(res));
										},
										fail: function(err) {
											console.log('fail:' + JSON.stringify(err));
										}
									});
								}
							}).catch(err => {

							})
						}
					}
				})
				return false;
			},
			onGetApplet() {
				let _this = this
				detail({
					id: _this.form.applet_id
				}).then(res => {
					_this.applet = res.data
				}).catch(err => {

				})
			}
		}
	}
</script>

<style lang="scss">
	.submit {
		width: 100%;
		position: fixed;
		bottom: 30rpx;
		z-index: 9999;
		display: flex;
		flex-direction: row;
		justify-content: space-around;

		.btn {
			width: 90%;
			margin: 30rpx auto;

			.u-button {
				height: 100rpx;
			}
		}
	}

	.form {
		width: 86%;
		margin: 30rpx auto;
		background-color: #fff;
		padding: 30rpx;
		border-radius: 10rpx;

		.content {
			margin-top: 30rpx;
		}

		.header {
			.title {
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.item {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin: 30rpx 0rpx;

			.label {
				width: 30%;
			}

			.value {
				width: 70%;
			}
		}
	}

	.applet {
		width: 92%;
		margin: 0 auto;

		.item {
			display: flex;
			flex-direction: column;
			background-color: #fff;
			padding: 15rpx 30rpx;
			margin: 15rpx 0rpx;
			border-radius: 10rpx;
			position: relative;
			overflow: hidden;

			.tips {
				position: absolute;
				right: 0rpx;
				top: 0rpx;
				background-color: #18b566;
				color: #fff;
				padding: 10rpx;
				border-radius: 0rpx 0rpx 0rpx 10rpx;
			}

			.tips.Warning {
				background-color: #ff9900;
			}

			.tips.error {
				background-color: #fa3534;
			}

			.tips.success {
				background-color: #19be6b;
			}

			.header {
				.title {
					font-size: 32rpx;
					font-weight: bolder;
				}

				margin-bottom: 10rpx;
			}

			.content {
				display: flex;
				flex-direction: column;

				.line {
					display: flex;
					flex-direction: row;
					margin: 10rpx 0rpx;

					.label {
						margin-right: 30rpx;
						color: #82848a;
					}

					.value {
						color: #303133;
					}
				}
			}

			.btns {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;
				align-content: center;
				margin-top: 10rpx;
				border-top: 1rpx solid #e7e6e4;

				.btn {
					text-align: center;
					width: 50%;
					height: 81rpx;
					line-height: 81rpx;
				}

				.btn:nth-of-type(1) {
					border-right: 1rpx solid #e7e6e4;
				}
			}
		}
	}
</style>